<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>epg测试页面</title>

    <link media="all" type="text/css" href="./css/ui.css?v=2014122229711" rel="stylesheet">
    <link media="all" type="text/css" href="./css/pps.css?v=2014122229711" rel="stylesheet">
    <script src="./js/core.js?v=2014122229711" type="text/javascript"></script>
    <script src="./js/ui.js?v=2014122229711" type="text/javascript"></script>
    <script src="./js/qui.js?v=2014122229711" type="text/javascript"></script>


<body>
<!--<svg id="drawSvg">-->
<!--<rect x="15" y="15" width="40" height="40" fill="red">-->
<!--<set attributeName="fill" to="blue" begin="click"/>-->
<!--</rect>-->
<!--</svg>-->
<div id="panel" style="padding-left: 100px;padding-top: 100px" ondragstart="return false;"
     oncontextmenu="return false;">
    <div id="panel-content" style="width: 1072px; height: 603px; position: relative; background-color: rgb(255, 0, 0);">
        <div id="movePanel"
             style="position: absolute; z-index: 600; display: block; width: 396px; height: 216px; top: 100px; left: 100px;user-select:none">
            <img name="editImg" style="position: absolute" onload="loadImageComplete(this)"
                 src="f:/388290e30978313961250906833488ab.jpg">

            <div style="width: 100%; height: 100%; z-index: 310; position: absolute; overflow: hidden;">
                <div class="jcrop-hline" style="position: absolute; opacity: 0.4;"></div>
                <div class="jcrop-hline bottom" style="position: absolute; opacity: 0.4;"></div>
                <div class="jcrop-vline right" style="position: absolute; opacity: 0.4;"></div>
                <div class="jcrop-vline" style="position: absolute; opacity: 0.4;"></div>
                <div class="jcrop-tracker" style="cursor: move; position: absolute; z-index: 360;"></div>
            </div>
            <div zoom-key="true" style="width: 100%; height: 100%; z-index: 320; display: block;">
                <div class="ord-n jcrop-dragbar" style="cursor: n-resize; position: absolute; z-index: 370;"></div>
                <div class="ord-s jcrop-dragbar" style="cursor: s-resize; position: absolute; z-index: 371;"></div>
                <div class="ord-e jcrop-dragbar" style="cursor: e-resize; position: absolute; z-index: 372;"></div>
                <div class="ord-w jcrop-dragbar" style="cursor: w-resize; position: absolute; z-index: 373;"></div>
                <div class="ord-n jcrop-handle"
                     style="cursor: n-resize; position: absolute; z-index: 374; opacity: 0.5;"></div>
                <div class="ord-s jcrop-handle"
                     style="cursor: s-resize; position: absolute; z-index: 375; opacity: 0.5;"></div>
                <div class="ord-e jcrop-handle"
                     style="cursor: e-resize; position: absolute; z-index: 376; opacity: 0.5;"></div>
                <div class="ord-w jcrop-handle"
                     style="cursor: w-resize; position: absolute; z-index: 377; opacity: 0.5;"></div>
                <div class="ord-nw jcrop-handle"
                     style="cursor: nw-resize; position: absolute; z-index: 378; opacity: 0.5;"></div>
                <div class="ord-ne jcrop-handle"
                     style="cursor: ne-resize; position: absolute; z-index: 379; opacity: 0.5;"></div>
                <div class="ord-se jcrop-handle"
                     style="cursor: se-resize; position: absolute; z-index: 380; opacity: 0.5;"></div>
                <div class="ord-sw jcrop-handle"
                     style="cursor: sw-resize; position: absolute; z-index: 381; opacity: 0.5;"></div>
            </div>
        </div>
    </div>
</div>
</body>
<script type="text/javascript">

var bindCount = 0;
var startMove = false;
var startClientPos = {x: 0, y: 0}
var originalRect = {x: 0, y: 0, w: 0, h: 0}
var startDrag = false;

function getPos(event) {
    return {
        x: event.pageX - $("#movePanel").parent().offset().left, y: event.pageY - $("#movePanel").parent().offset().top
    }
}
function moveFunc(event) {
    console.log("event.which" + event.which);
    if (!startMove) {
        console.log("moveFunc false");
        return;
    }
    if (event.which == 1) {
        var newPos = getPos(event)
        var direct = startClientPos.direct
        var delta = {x1: startClientPos.pos.x, x2: newPos.x, y1: startClientPos.pos.y, y2: newPos.y };
        //{x: event.clientX - startClientPos.x, y: event.clientY - startClientPos.y }
        updateRect({dlx: delta.x2 - delta.x1, dly: delta.y2 - delta.y1 }, direct)
    }
}

function dragFunc(event) {
    console.log("dragFunc");
    if (!startDrag) {
        console.log("dragFunc false");
        return
    }
    if (event.which == 1) {
        var newPos = getPos(event);
        var delta = {x1: startClientPos.pos.x, x2: newPos.x, y1: startClientPos.pos.y, y2: newPos.y };
        updatePosition({dlx: delta.x2 - delta.x1, dly: delta.y2 - delta.y1, finalX: delta.x2, finalY: delta.y2 })
    }
}
function dragEnd(event) {
    console.log("dragEnd");
    if (startDrag) {
        startDrag = false;
        $("#movePanel").unbind("mousemove", dragFunc);
        $("#movePanel").unbind("mouseout", dragEnd);
        $("#movePanel").unbind("mouseup", dragEnd);
    }
}

function getOppDirect(direct) {
    switch (direct) {
        case "s":
            return "n";
        case "e":
            return "w";
        case "w":
            return "e";
        case "n":
            return "s";
    }
}

function moveOut(event) {
    console.log("mouseleave", event.clientX, event.clientY);
}
function buildMovePanel(divId, imgUrl) {
    var htmlArr = [];
    htmlArr.push('<div id="movePanel_' + divId + '" style="position: absolute; z-index: 600; display: block; width: 396px; height: 216px; top: 100px; left: 100px;user-select:none">')
    htmlArr.push(' <img name="editImg" img-id=' + divId + ' style="position: absolute" onload="loadImageComplete(this)" src="' + imgUrl + '">');
    htmlArr.push('<div style="width: 100%; height: 100%; z-index: 310; position: absolute; overflow: hidden;">')
    htmlArr.push('<div class="jcrop-hline" style="position: absolute; opacity: 0.4;"></div>')
    htmlArr.push('<div class="jcrop-hline bottom" style="position: absolute; opacity: 0.4;"></div>')
    htmlArr.push('<div class="jcrop-vline right" style="position: absolute; opacity: 0.4;"></div>')
    htmlArr.push('<div class="jcrop-vline" style="position: absolute; opacity: 0.4;"></div>')
    htmlArr.push('<div class="jcrop-tracker" style="cursor: move; position: absolute; z-index: 360;"></div>')
    htmlArr.push('</div>');
    htmlArr.push('<div zoom-key="true" style="width: 100%; height: 100%; z-index: 320; display: block;">')
    htmlArr.push('<div class="ord-n jcrop-dragbar" style="cursor: n-resize; position: absolute; z-index: 370;"></div>')
    htmlArr.push('<div class="ord-s jcrop-dragbar" style="cursor: s-resize; position: absolute; z-index: 371;"></div>')
    htmlArr.push('<div class="ord-e jcrop-dragbar" style="cursor: e-resize; position: absolute; z-index: 372;"></div>')
    htmlArr.push('<div class="ord-w jcrop-dragbar" style="cursor: w-resize; position: absolute; z-index: 373;"></div>')
    htmlArr.push('<div class="ord-n jcrop-handle"  style="cursor: n-resize; position: absolute; z-index: 374; opacity: 0.5;"></div>')
    htmlArr.push('<div class="ord-s jcrop-handle"  style="cursor: s-resize; position: absolute; z-index: 375; opacity: 0.5;"></div>')
    htmlArr.push('<div class="ord-e jcrop-handle"  style="cursor: e-resize; position: absolute; z-index: 376; opacity: 0.5;"></div>')
    htmlArr.push('<div class="ord-w jcrop-handle"  style="cursor: w-resize; position: absolute; z-index: 377; opacity: 0.5;"></div>')
    htmlArr.push('<div class="ord-nw jcrop-handle" style="cursor: nw-resize; position: absolute; z-index: 378; opacity: 0.5;"></div>')
    htmlArr.push('<div class="ord-ne jcrop-handle" style="cursor: ne-resize; position: absolute; z-index: 379; opacity: 0.5;"></div>')
    htmlArr.push('<div class="ord-se jcrop-handle" style="cursor: se-resize; position: absolute; z-index: 380; opacity: 0.5;"></div>')
    htmlArr.push('<div class="ord-sw jcrop-handle" style="cursor: sw-resize; position: absolute; z-index: 381; opacity: 0.5;"></div>')
    htmlArr.push('</div>')
    htmlArr.push('</div>')
    // var movePanel = $(htmlArr.join(""));
}
function updatePosition(delta) {
    var newCss = $.extend(true, {}, originalRect);
    newCss.x += delta.dlx;
    newCss.y += delta.dly;
    if (newCss.x < 0) {
        newCss.x = 0;
    }
    if (newCss.y < 0) {
        newCss.y = 0;
    }
    if (newCss.h + newCss.y > newCss.maxHeight) {
        newCss.y = newCss.maxHeight - newCss.h;
    }
    if (newCss.x + newCss.w > newCss.maxWidth) {
        newCss.x = newCss.maxWidth - newCss.w;
    }
    $("#movePanel").css({width: newCss.w, height: newCss.h, left: newCss.x, top: newCss.y })
}

function doAdjustWidthAuto() {
    $("body").trigger("mouseup");
    if (originalRect != null) {
        var newCss = {x: originalRect.x, y: originalRect.y,w:0,h:$("#movePanel").height()};
        newCss.w = newCss.h / $("#movePanel").find("img[name=editImg]")[0].naturalHeight * $("#movePanel").find("img[name=editImg]")[0].naturalWidth;
        if (newCss.w >= originalRect.maxWidth) {
            newCss.w = originalRect.maxWidth;
        }
        if (newCss.w + newCss.x >= originalRect.maxWidth) {
            newCss.x = originalRect.maxWidth - newCss.w;
        }
        $("#movePanel").css({width: newCss.w, height: newCss.h, left: newCss.x, top: newCss.y })
        $("#movePanel").find("img[name=editImg]").css({width: newCss.w, height: newCss.h});
    }
}
function doAdjustHeightAuto() {
    $("body").trigger("mouseup");
    if (originalRect != null) {
        var newCss = {x: originalRect.x, y: originalRect.y,w:$("#movePanel").width(),h:0};
        newCss.h = newCss.w /  $("#movePanel").find("img[name=editImg]")[0].naturalWidth*$("#movePanel").find("img[name=editImg]")[0].naturalHeight
        if (newCss.h >= originalRect.maxHeight) {
            newCss.h = originalRect.maxHeight;
        }
        if (newCss.h + newCss.y >= originalRect.maxHeight) {
            newCss.y = originalRect.maxHeight - newCss.h;
        }
        $("#movePanel").css({width: newCss.w, height: newCss.h, left: newCss.x, top: newCss.y })
        $("#movePanel").find("img[name=editImg]").css({width: newCss.w, height: newCss.h});
    }
}

function updateRect(delta, direct) {
    console.log("updateRect delta", JSON.stringify(delta));
    var newCss = $.extend(true, {}, originalRect);

    if (direct.indexOf("s") != -1) {
        if (delta.dly >= 0) {
            newCss.h += delta.dly;
        } else if (delta.dly + newCss.h >= 0) {
            newCss.h += delta.dly;
        } else if (delta.dly + newCss.h + newCss.y >= 0) {
            newCss.h = -(delta.dly + newCss.h)
            newCss.y -= newCss.h;
        } else {
            newCss.h = newCss.y;
            newCss.y = 0;
        }
    } else if (direct.indexOf("n") != -1) {
        if (delta.dly >= newCss.h) {
            newCss.y = newCss.y + newCss.h;
            newCss.h = delta.dly - newCss.y;
        } else if (delta.dly + newCss.y >= 0) {
            newCss.y = newCss.y + delta.dly;
            newCss.h = newCss.h - delta.dly;
        } else {
            newCss.h = newCss.y + newCss.h;
            newCss.y = 0;
        }

    }
    if (direct.indexOf("e") != -1) {
        if (delta.dlx >= 0) {
            newCss.w += delta.dlx;
        } else if (delta.dlx + newCss.w > 0) {
            newCss.w += delta.dlx;
        } else if (delta.dlx + newCss.w + newCss.x >= 0) {
            newCss.w = -(delta.dlx + newCss.w)
            newCss.x -= newCss.w;
            console.log(newCss.w, newCss.x)
        } else {
            newCss.w = newCss.x;
            newCss.x = 0;
        }
    } else if (direct.indexOf("w") != -1) {
        if (delta.dlx >= newCss.w) {
            newCss.x = newCss.x + newCss.w;
            newCss.w = delta.dlx - newCss.x;
        } else if (delta.dlx + newCss.x >= 0) {
            newCss.x = newCss.x + delta.dlx;
            newCss.w = newCss.w - delta.dlx;
        } else {
            newCss.w = newCss.x + newCss.w;
            newCss.x = 0;
        }
    }
    if (newCss.y < 0) {
        newCss.y = 0;
    }
    if (newCss.x < 0) {
        newCss.x = 0;
    }

    if (newCss.x + newCss.w > newCss.maxWidth) {
        newCss.w = newCss.maxWidth - newCss.x;
    }
    if (newCss.h + newCss.y >= newCss.maxHeight) {
        newCss.y = newCss.maxHeight - newCss.h;
    }
    $("#movePanel").css({width: newCss.w, height: newCss.h, left: newCss.x, top: newCss.y })
    $("#movePanel").find("img[name=editImg]").css({width: newCss.w, height: newCss.h});
}
function loadImageComplete(element) {
    console.log(element.naturalWidth, element.naturalHeight);
    $(element).parent().css({width: element.naturalWidth, height: element.naturalHeight})
}

function globalEvent(event){
    if(event.altKey&& event.which == WrapSys.Config.KEY_CODE.W){
      doAdjustWidthAuto()
    }else if(event.altKey&& event.which == 72){
        doAdjustHeightAuto()
    }
}
$(document).ready(function () {

    $("div.jcrop-handle,div.jcrop-dragbar").on("mousedown", function (event) {
        startMove = true;
        startClientPos.pos = getPos(event);
        startClientPos.target = $(this);
        startClientPos.direct = $(event.currentTarget).attr("class").replace(/jcrop-handle/g, "").replace(/jcrop-dragbar/g, "").trim()
        originalRect.x = $("#movePanel").offset().left - $("#movePanel").parent().offset().left;
        originalRect.y = $("#movePanel").offset().top - $("#movePanel").parent().offset().top;
        originalRect.w = $("#movePanel").width();
        originalRect.h = $("#movePanel").height();
        originalRect.maxHeight = $("#movePanel").parent().height();
        originalRect.maxWidth = $("#movePanel").parent().width();
        bindCount++;
        $("body").bind("mousemove", moveFunc)
        console.log("mousedown ", startMove, bindCount);
    })

    $("#movePanel").on("mousedown", function (event) {
        if (!startDrag) {
            startDrag = true;
            startClientPos.pos = getPos(event);
            startClientPos.target = $(this);
            originalRect.x = $("#movePanel").offset().left - $("#movePanel").parent().offset().left;
            originalRect.y = $("#movePanel").offset().top - $("#movePanel").parent().offset().top;
            originalRect.w = $("#movePanel").width();
            originalRect.h = $("#movePanel").height();
            originalRect.maxHeight = $("#movePanel").parent().height();
            originalRect.maxWidth = $("#movePanel").parent().width();
            console.log("mousedown,movePanel")
            $("#movePanel").bind("mousemove", dragFunc);
            $("#movePanel").bind("mouseout", dragEnd);
            $("#movePanel").bind("mouseup", dragEnd);
        }
    })

    $("body").on("mouseup", function (event) {
        console.log("mouseup");
        if (startMove) {
            startMove = false;
            console.log("mouseup", startMove)
            $("body").unbind("mousemove", moveFunc)
            bindCount--;
            console.log("mouseup", startMove, bindCount)
        }
    })
    $(window).unbind("keydown").bind("keydown", function (e) {
        return  VODNew.Util.globalEvent(e);
    });
//    $("body").
})
</script>
</html>